<template>
  <div id="app">
   
    <div id="nav" class="isShow" v-if="isShow" v-show="$route.meta.istrun">
      <el-container>
        <el-header height="80px">
          <span
            style="
              position: absolute;
              left: 50px;
              font-size: 2.2vw;
              font-weight: 400;
            "
            >网络教学系统</span
          >
          <router-link class="top-router-btn" to="/">首页</router-link>
          <router-link class="top-router-btn" to="/course">课程</router-link>
          <router-link class="top-router-btn" to="/discuss">讨论</router-link>
          <router-link class="top-router-btn" to="/nav">导航</router-link>
          <router-link class="top-router-btn" to="/my">我的</router-link>
          
        </el-header>
      </el-container>
    </div>
    <keep-alive>
    <router-view></router-view>
    </keep-alive>
   
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: "",
      isShow:true,
    };
  },
  mounted(){
    this.showHide()
  },
   watch:{
    $router(){
      this.showHide
    }
  },
  methods: {
    mouseOver: function () {
      this.active = "background: #cccccc";
      console.log("ok");
    },
    mouseLeave: function () {
      this.active = "";
    },
    showHide(){
      if(this.$router.name==='login'){
        this.isShow-false
      }
      else{
        this.isShow=true
      }
    }
  },
 
};
</script>
<style lang="scss">
.el-header {
  background-color: #409eff;
  color: white;
  text-align: center;
  line-height: 80px;
  font-size: 20px;
}
#app,html,body {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  // text-align: left;
  // justify-items: center;
  // color: #2c3e50;
}

#nav {
  .top-router {
    //margin: auto;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-items: center;
    display: block;
    &-btn {
      transition: 0.3s;
      //display:block;
      margin: 0 1vw;
      height: 30px;
      text-decoration: none;
      padding: 5px 30px;
      font-weight: 500;
      color: white;
      &.router-link-exact-active {
        transition: 0.3s;
        border-radius: 18px;
        background: #f2f6fc;
        color: #606266;
      }
    }
  }
}
</style>
